<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Regrid Example</title>
        <link rel="stylesheet" href="base.css" />
        <link rel="stylesheet" href="regrid.php?w=640,960,1280" />
    </head>
    <body>
        <div class="g g-960 g-all">
            <h1 class="g-c g-2 g-16-lt-960">Logo</h1>
            <div class="g-c g-14 g-16-lt-960">
                <h3>Menu</h3>
            </div>
        </div>
        <div class="g g-960 g-all">
            <div class="g-c g-12 g-16-lt-960">
                <h6>Content</h6>
                <div class="g-c g-8 g-16-lt-960">
                    <h1>1st Article</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam. Nam et velit eu velit congue dignissim nec id nisl. Vivamus eget eros nisi, eu consequat arcu.</p>
                </div>
                <div class="g-c g-4 g-8-lt-960">
                    <h1>2nd Article</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam. Nam et velit eu velit congue dignissim nec id nisl. Vivamus eget eros nisi, eu consequat arcu.</p>
                </div>
                <div class="g-c g-4 g-8-lt-960">
                    <h1>3rd Article</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam. Nam et velit eu velit congue dignissim nec id nisl.</p>
                </div>
                <div class="g-c g-8 g-16-lt-960">
                    <h2 class="g-c g-1">1</h2>
                    <h2 class="g-c g-15">Section Title</h2>
                    <div class="g-c g-4 g-8-lt-1280">
                        <h3>Article 1</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam.</p>
                    </div>
                    <div class="g-c g-4 g-8-lt-1280">
                        <h3>Article 2</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam.</p>
                    </div>
                    <div class="g-c g-4 g-8-lt-1280 g-0-lt-960">
                        <h3>Article 3</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam.</p>
                    </div>
                    <div class="g-c g-4 g-8-lt-1280 g-0-lt-960">
                        <h3>Article 4</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam.</p>
                    </div>
                </div>
                <div class="g-c g-8 g-16-lt-960">
                    <h2 class="g-c g-1">2</h2>
                    <h2 class="g-c g-15">Section Title</h2>
                    <div class="g-c g-4 g-8-lt-1280">
                        <h3>Article 1</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam.</p>
                    </div>
                    <div class="g-c g-4 g-8-lt-1280">
                        <h3>Article 2</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam.</p>
                    </div>
                    <div class="g-c g-4 g-8-lt-1280 g-0-lt-960">
                        <h3>Article 3</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam.</p>
                    </div>
                    <div class="g-c g-4 g-8-lt-1280 g-0-lt-960">
                        <h3>Article 4</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus gravida dui nec rutrum. Nullam eu quam sapien, id venenatis diam.</p>
                    </div>
                </div>
            </div>
            <div class="g-c g-4 g-16-lt-960">
                <h6>Sidebar</h6>
                <div class="g-c g-16 g-4-lt-960">
                    <h4>Sidebar 1</h4>
                </div>
                <div class="g-c g-16 g-4-lt-960">
                    <h4>Sidebar 2</h4>
                </div>
                <div class="g-c g-16 g-4-lt-960">
                    <h4>Sidebar 3</h4>
                </div>
                <div class="g-c g-16 g-4-lt-960">
                    <h4>Sidebar 4</h4>
                </div>
            </div>
        </div>
        <div class="g g-960 g-all">
            <h6>Footer</h6>
            <div class="g-c g-4 g-8-lt-960">
                <h4>Menu</h4>
            </div>
            <div class="g-c g-4 g-8-lt-960">
                <h4>Promo</h4>
            </div>
            <div class="g-c g-4 g-8-lt-960">
                <h4>Social</h4>
            </div>
            <div class="g-c g-4 g-8-lt-960">
                <h4>Contact</h4>
            </div>
        </div>
    </body>
</html>